<template>
  <div>
    <!-- <div v-bind:title="message">没事的想怎样怎样嘛</div>
    <p>{{ messages }}</p>
    <button v-on:click="reverseMessage">反转消息</button> -->

    <input type="text" placeholder="请输入歌手" v-model="name"/>
    <input type="text" placeholder="请输入歌曲名称" v-model="item" />
    <input type="number" placeholder="歌曲播放量" v-model.number="num" />
    <button @click="name&&item? fun1():funnull()" >添加</button>
    <input type="text" :value="arr.length" disabled style="width:30px;box-sizing:border-box;padding:2px;text-align:center;">
    <table border="1px" cellspacing="0" cellpadding="3px" class="cmz-table">
      <thead>
        <tr>
          <th>歌手</th>
          <th>歌曲</th>
          <th>歌曲播放量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v,i in arr" :key="v.id">
          <td>{{v.name}}</td>
          <td>{{v.item}}</td>
          <td>{{v.num}}</td>
          <td><button @click="fun2(i)">删除</button></td>
        </tr>
        <tr v-if="arr.length !=0" class="itemnum" >
          <td colspan="2">当前显示歌手数量为 {{arr.length}}</td>
          <td colspan="2">积累播放量为 {{getNum}}</td>
          </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      item: "",
      num:0,
      arr: [],
      // val: "",
      // message: "别想了不会理你了",
      // messages: "qwesvdcsdfg12123",
    };
  },
  computed:{
    getNum(){
      let a = 0;
      for (const i of this.arr) {
          a+=i.num
      }
      return a
    }
  },
  methods: {
    // reverseMessage:function(){
    //     this.messages = this.messages.split('').reverse().join('')
    //     console.log(1231231);
    // }
    fun1(){
      this.arr.push({'name':this.name,'item':this.item,'num':this.num,'id':this.arr.length})
      console.log(this.arr);
      this.name = ""
      this.item = ""
      
    },
    fun2(i){
      this.arr.splice(i,1)
      console.log(i);
    },
    funnull(){
      alert('不能输入添加空值')
    }
  },
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.cmz-table{
  width: 500px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
}
.itemnum{
  width: 100%;
  height: 20px;
  background-color: rgb(116, 188, 255);
  text-align: center;
}
</style>